<template>
  <div>
    <a-card :bordered="false" class="listDetail">
      <h3 class="detail-tips">
        记录人信息
        <a-button class="check-btn" v-if="model.status == 1" type="primary" @click="handleVerify"><i class="iconfont iconicon-review"></i>审核</a-button>
      </h3>
      <a-descriptions>
        <a-descriptions-item label="标题">
          <a-tooltip placement="right" :title="model.title">
            {{ model.title }}
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="记录人(学号)">
          {{ model.createUserText }}
        </a-descriptions-item>
        <a-descriptions-item label="时间">
          {{ recordTime }}
        </a-descriptions-item>
        <a-descriptions-item label="所在学校">
          {{ model.createDept }}
        </a-descriptions-item>
        <a-descriptions-item label="所在班级">
          {{ model.createClasses }}
        </a-descriptions-item>
        <a-descriptions-item label="联系电话">
          <span v-if="model.phone">
            {{ model.phone }}
          </span>
          <span v-else>
            无
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="事发地点" :span="5">
          {{ model.location.location }}&nbsp;&nbsp;<a-button type="link" @click="showMap">查看地图</a-button>
        </a-descriptions-item>
      </a-descriptions>
      <div class="fileMian">
        <h3 class="detail-tips">记录内容描述</h3>
        <div class="detail-file p15 pb0">
          <p v-if="model.content" v-html="model.content" class="mb10" style="white-space: pre-wrap;">
            {{model.content}}
          </p>
          <p v-else class="mb10">
            无
          </p>
          <a-upload
            listType="picture-card"
            disabled
            :fileList="picFileList"
            @preview="handlePreview"
            @change="handleChange"
            class="mt15">
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel" class="nonePadding previewImage">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </div>
      <div class="fileMian">

        <h3 class="detail-tips">视频音频</h3>
        <div class="detail-file p15 pb0" v-if="(videoFileList.length <= 0) && (radioFileList.length <= 0)">
          无
        </div>
        <div class="detail-file p15 pb0" v-else>

          <div class="detail-file-list clearfix" v-for="video in videoFileList">
            <i class="iconfont iconshipin fl"></i>
            <span class="detail-file-name fl">{{video.name}}</span>
            <a-button class="fl detail-file-btn" type="link" @click="preview(video)"><i class="iconfont iconyulan"></i>预览</a-button>
          </div>

          <div class="detail-file-list clearfix" v-for="radio in radioFileList">
            <i class="iconfont iconyinpin fl"></i>
            <span class="detail-file-name fl">{{ radio.name }}</span>
            <a-button class="fl detail-file-btn" type="link" @click="preview(radio)"><i class="iconfont iconyulan"></i>预览</a-button>
          </div>

        </div>

      </div>

      <div class="p15 pl0" v-if="model.status != 1">
      <h3 class="detail-tips">审核信息</h3>
        <a-descriptions :column="2">
          <a-descriptions-item label="审核状态">
            <span v-if="model.status == 1">未审核</span>
            <span v-if="model.status == 2">审核通过</span>
            <span v-if="model.status == 3">审核未通过</span>
          </a-descriptions-item>
          <a-descriptions-item label="发布状态">
            <span v-if="model.status == 1">未发布</span>
            <span v-if="model.status == 2">展示中</span>
            <span v-if="model.status == 3">未通过</span>
          </a-descriptions-item>
          <a-descriptions-item label="备注说明">
            <span v-if="model.memo">
              {{ model.memo }}
            </span>
            <span v-else>无</span>
          </a-descriptions-item>
        </a-descriptions>

      </div>
      <previewSysFile ref="previewSysFile" @previewImg="previewImg" ></previewSysFile>
      <good-things-verify-modal ref="verifyModal" @ok="getDetail"></good-things-verify-modal>
      <baidu-map-modal ref="mapModal"></baidu-map-modal>
    </a-card>
  </div>
</template>

<script>
import previewSysFile from "@/components/file/KPreviewSysFile";
import KImgPreviewer from '@comp/file/KImgPreviewer'
import GoodThingsVerifyModal from "@views/platform/minorProtect/modules/GoodThingsVerifyModal";
import {getFileAccessHttpUrl, postAction} from "@api/manage";
import moment from "moment";
import BaiduMapModal from "@comp/tools/BaiduMapModal";

  export default {
    name: "modulesGoodThingsDetail",
    components: {
      BaiduMapModal,
      previewSysFile,
      KImgPreviewer,
      GoodThingsVerifyModal,
    },
    inject: ['reload'],
    data () {
      return {
        model: {},
        previewVisible: false,
        previewImage: '',
        recordTime: '',
        picFileList: [],
        radioFileList:[],
        videoFileList:[],
        url:{},
      }
    },
    computed:{
    },
    watch: {
      '$route':function(route) {
        this.getDetail()
      }
    },
    created() {
      this.getDetail();
    },
    mounted() {

    },
    methods: {
      showMap() {
        let that = this;
        let record = that.model.location;
        this.$refs.mapModal.show(record);
      },
      handleVerify() {
        let that = this;
        let record = that.model;
        this.$refs.verifyModal.show(record);
      },
      getDetail() {
        let that = this;
        that.reload;
        let id = this.$route.query.id;

        postAction("/goodThings/detail?id="+id).then(res=>{
          if(res.success){
            that.model = res.result.goodThings;
            that.recordTime = moment(that.model.createTime).format("YYYY-MM-DD");

            that.model.location = JSON.parse(that.model.location);

            let picPaths = that.model.picAttach;
            let radioPaths = that.model.radioAttach;
            let videoPaths = that.model.videoAttach;

            that.picFileList = this.formatFileList(picPaths);
            /**
             *  替换图片地址为服务器端地址
             */
            that.picFileList.forEach(item => {
              item.url = getFileAccessHttpUrl(item.url);
              item.httpUrl = getFileAccessHttpUrl(item.httpUrl);
            })

            that.radioFileList = this.formatFileList(radioPaths);
            that.videoFileList = this.formatFileList(videoPaths);


          }
        }).catch(()=>{

        })
      },
      // 格式化各类附件json对象数组信息
      formatFileList(paths) {
        let arr = [];
        let parsedArr = this.parseJsonArr(paths);
        arr = this.transArray(parsedArr);
        return arr;
      },
      parseJsonArr(paths) {
        let arr = [];
        if (paths == null || paths === '' || paths === 'undefined' || paths === undefined) return arr;
        if (typeof paths == 'string') {
          arr = JSON.parse(paths)
        } else {
          arr = JSON.parse(JSON.stringify(paths))
        }
        return arr;
      },
      transArray(arr) {
        let tempArr = [];
        if (arr.length === 0) return tempArr;
        arr.forEach(item => {
          tempArr.push({
            uid: item.fileId,
            name: item.fileName,
            ext: item.ext,
            url: item.filePath,
            httpUrl: item.httpUrl,
            fileType: item.fileType,
            status: 'done'
          });
        });
        return tempArr;
      },
      handlePreview (file) {
        this.previewImage = file.url || file.httpUrl
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      handleChange ({ fileList }) {
        this.picFileList = fileList
      },
      getViewer(viewer) {
        if (this.viewer) {
          this.$nextTick(() => {
            viewer.show();
          });
        } else {
          this.viewer = viewer;
        }
      },
      previewImg(image) {
        this.image = image;
      },
      preview(record){
        this.$refs.previewSysFile.showFile(record.name,record.uid,record.ext);
      }
    }
  }
</script>
